<template>
  <div class="van-loading" v-html="svg" :style="loadingStyle">
  </div>
</template>
<script>
import * as svgLoading from "./svg";
import { computed, defineComponent, onMounted, ref } from "vue";
export default defineComponent({
  name: "van-loading",
  props: {
    type: {
      type: String,
      default: "bars",
      required: false,
      validator(value) {
        return [
          "balls",
          "bars",
          "beat",
          "bubbles",
          "cylon",
          "spin",
          "spiningDubbles",
          "barsCylon",
        ].includes(value);
      },
    },
    color: {
      type: String,
      default: "#5ac1dd",
      required: false,
    },
    size: {
      type: Object,
      default: () => {
        return { width: "30px", height: "30px" };
      },
      required: false,
    },
  },
  setup(props) {
    const svg = ref();
    const loadingStyle = computed(() => {
      return {
        fill: props.color,
        width: props.size.width,
        height: props.size.height,
      };
    });
    onMounted(() => {
      svg.value = svgLoading[props.type];
    });
    return {
      svg,
      loadingStyle,
    };
  },
});
</script>

<style scoped>
.van-loading {
  margin: auto;
}
</style>

